<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>

<body>
<f:view>
<f:loadBundle basename="messages" var="msg"/>
	<h:form>

        <style type="text/css">
            .rich-message-marker img {
                padding-right:7px;
            }
            .rich-message-label {
                color:red;
            }
        </style>    

		<div align="center"><rich:spacer width="1" height="50" />
		 <rich:panel style="width:420px;">
			<f:facet name="header">
				<h:outputText value="Login Screen"></h:outputText>
			</f:facet>
			
			<h:panelGrid columns="3" style="width:400px;">

				<h:outputText value="#{msg.lblUserName}" />
				<h:inputText value="#{loginController.userName}" id="userName" >
					<!--<f:validateLength minimum="3" maximum="12" /> -->
				</h:inputText>
				<rich:message for="userName">
                    <f:facet name="passedMarker">
                        <h:graphicImage  value="/images/passed.gif" /> 
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/images/error.gif" />   
                    </f:facet>
                </rich:message>
				

				<h:outputText value="#{msg.lblPassword}" />
				<h:inputSecret value="#{loginController.password}" id="password">
					<!--<f:validateLength minimum="3" maximum="12" />
					<rich:ajaxValidator event="onblur" /> -->
				</h:inputSecret>
				<rich:message for="password">
                    <f:facet name="passedMarker">
                        <h:graphicImage  value="/images/passed.gif" /> 
                    </f:facet>
                    <f:facet name="errorMarker">
                        <h:graphicImage value="/images/error.gif" />   
                    </f:facet>
                </rich:message>
				
				</h:panelGrid>
				<a4j:commandButton action="#{loginController.authenticateUser}" value="#{msg.lblLogin}" />
				<h:outputText value="   " />
				<a4j:commandButton type="reset" value="#{msg.lblReset}"/> 
			
		</rich:panel>
		</div>

	</h:form>
</f:view>

</body>
</html>
